<template>
  <view class="tijiandetail">
    <image class="img" mode="widthFix" :src="tijianVal?.image"></image>
    <view class="detail">
      <view class="price">
        <p class="p1">￥{{ tijianVal?.price }}</p>
        <p class="p2">已约{{ tijianVal?.sales }}</p>
      </view>
      <p class="p3">{{ tijianVal?.title }}</p>
    </view>
    <!-- 时间选择 -->
    <view class="time">
      <text class="time-tt">选择预约时段</text>
      <scroll-view class="time-list" scroll-x="true">
        <view class="list">
          <view
            class="item"
            @click="tab(item.date)"
            :class="{ bg: data == item.date }"
            v-for="(item, index) in tijianVal?.date"
            :key="index"
          >
            <text class="one">{{ item.date }}</text>
            <text class="two">{{ item.week }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 适用人群 -->
    <view class="shiyong">
      <p class="p5">适用人群</p>
      <view class="list">
        <view
          class="item"
          v-for="(item, index) in tijianVal?.crowd"
          :key="index"
        >
          <image :src="item.image"></image>
          <p class="p6">{{ item.name }}</p>
        </view>
      </view>
    </view>
    <!-- 套餐项目 -->
    <view class="xiangmu">
      <p class="p7">套餐项目</p>
      <view
        class="list"
        v-for="(item, index) in tijianVal?.project"
        :key="index"
      >
        <view class="head">{{ item.title }}</view>
        <view class="context">
          <view class="item" v-for="(o, i) in item.content" :key="i">
            <view class="left">
              <text>{{ o.thing }}</text>
            </view>
            <view class="right">
              <text>{{ o.details }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="kong"></view>
    <view class="footer">
      <view class="price">合计：￥{{ tijianVal?.price }}</view>
      <button @click="submit">选择成员</button>
    </view>
    <view class="mark" v-if="flag" @click="flag = false">
      <view class="box">
        <p class="p8">选择成员</p>
        <view class="choose">
          <view class="left">
            <image src="../../static/我的就诊人.png"></image>
            <text>{{ jiuzhen?.name }}</text>
          </view>
          <view class="right">
            <p class="p" @click="add">选择就诊人</p>
          </view>
        </view>
        <button @click="tijiaoyuyue">提交预约</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import type { tijiaotijianT, tijiandetailT } from "../../types/type";
import { onShow } from "@dcloudio/uni-app";
const flag = ref(false);
const tijiaotijian = reactive<tijiaotijianT>({
  phy_name: "",
  phy_time: "",
  patient_id: "",
});
const tijiandetail = ref();
const tijianVal = ref<tijiandetailT>();
const jiuzhen = ref();
onShow(() => {
  const jiuzhen1 = uni.getStorageSync("jiuzhenInfo");
  jiuzhen.value = jiuzhen1;
  var pages = getCurrentPages();
  let prevpage = pages[pages.length - 2];
  if (prevpage.route != "navPage/tijianyuyue/tijianyuyue") {
    flag.value = true;
    return;
  }
});
const getList = async () => {
  const res: any = await api.phydateil({ id: tijiandetail.value });
  tijianVal.value = res.data[0];
  console.log(res);
};
onMounted(() => {
  tijiandetail.value = uni.getStorageSync("tijiandetail");
  getList();
});
const data = ref<string>("");
const tab = (date: string) => {
  data.value = date;
  tijiaotijian.phy_time = date;
  console.log(date);
};

const submit = () => {
  flag.value = true;
};

const add = () => {
  uni.navigateTo({
    url: "/navPage/jiuzhenren/jiuzhenren",
  });
};
const tijiaoyuyue = async () => {
  tijiaotijian.phy_name = tijianVal.value?.title;
  tijiaotijian.patient_id = jiuzhen.value?._id;
  const res: any = await api.resphy(tijiaotijian);
  console.log(res);
  if (res.msg == "提交成功") {
    uni.navigateTo({
      url: "/navPage/tijianList/tijianList",
    });
  } else {
    uni.showToast({
      title: res.msg,
      icon: "none",
    });
  }
};
</script>

<style lang="scss" scoped>
.tijiandetail {
  width: 100vw;
  //   height: 100vh;
  background-color: #fafafa;
  .choose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 50rpx 0;
    padding: 0 30rpx;
    box-sizing: border-box;
    .left {
      flex: 1;
      display: flex;
      align-items: center;
      image {
        width: 100rpx;
        height: 100rpx;
      }
    }
    .right {
      .p {
        color: #2c76ef;
      }
    }
  }
  .mark {
    background-color: #0000007d;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    .box {
      width: 100%;
      height: 400rpx;
      background-color: #fff;
      button {
        width: 95%;
        background-color: #2c76ef;
        color: #fff;
      }
      .p8 {
        text-align: center;
        font-weight: 600;
        font-size: 35rpx;
        margin: 20rpx 0;
      }
    }
  }
  .img {
    width: 100%;
  }
  .detail {
    width: 100%;
    padding: 35rpx;
    box-sizing: border-box;
    background-color: #fff;
    line-height: 60rpx;
    .price {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #f00;
      font-weight: 600;
      .p2 {
        color: #000;
      }
    }
    .p3 {
      font-weight: 600;
      font-size: 35rpx;
    }
  }
  //   时间选择
  .time {
    width: 100%;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    margin: 20rpx 0;
    .time-list {
      margin: 25rpx 0;
    }
    .list {
      display: flex;
      align-items: center;
      width: 130%;
      overflow-x: scroll;
      .bg {
        background-color: #2c76ef !important;
        color: #fff;
      }
      .item {
        text-align: center;
        padding: 12rpx;
        border-radius: 10rpx;
        line-height: 50rpx;
        margin-right: 10rpx;
        box-sizing: border-box;
      }
    }
    .time-tt {
      font-weight: 600;
    }
  }
  //   适用人群
  .shiyong {
    width: 100%;
    padding: 35rpx;
    box-sizing: border-box;
    background-color: #fff;
    .p5 {
      font-weight: 600;
    }
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20rpx 0;
      .item {
        width: 25%;
        text-align: center;
        line-height: 50rpx;
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }
  }
  //   套餐项目
  .xiangmu {
    width: 100%;
    padding: 35rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin: 20rpx 0;
    .p7 {
      font-weight: 600;
    }
    .list {
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      .head {
        width: 100%;
        background-color: #f0f2f8;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        font-weight: 600;
      }
      .context {
        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left,
          .right {
            width: 48%;
            background-color: #f0f2f8;
            text-align: center;
            height: 168px;
            margin: 10rpx;
            // line-height: 168px;
          }
          .left {
            line-height: 168px;
          }
          .right {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 200rpx;
    background-color: #fff;
    justify-content: space-between;
    .price {
      width: 250rpx;
      text-align: center;
      color: #f00;
      font-weight: 600;
    }
    button:last-child {
      background-color: #2c76ef;
      color: #fff;
      width: 250rpx;
    }
  }
  .kong {
    width: 100%;
    height: 250rpx;
    background-color: #f5f5f5;
  }
}
</style>
